<?
$this->headScript()->offsetSetFile(25,$this->baseUrl('js/jquery.qtip.min.js'),'text/javascript');
$this->headLink()->appendStylesheet($this->baseUrl('css/jquery.qtip.min.css'));
$style = <<<STYLE
    .ui-tooltip-wiki{
    	max-width: 680px;
    }
	.ui-tooltip-wiki .ui-tooltip-content{
		padding: 10px;
		line-height: 12.5px;
	}
	.ui-tooltip-wiki h1{
		margin: 0 0 7px;
		font-size: 1.5em;
		line-height: 1em;
	}
	.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
	.ui-tooltip-wiki p{ margin-bottom: 9px; }
	.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }

STYLE;
$this->headStyle()->appendStyle($style);


?>

// Make sure to only match links to wikipedia with a rel tag
$('.selectorQtip[rel]').each(function()
{
        // We make use of the .each() loop to gain access to each element via the "this" keyword...
		$(this).qtip(
		{
			content: {
                text: 'Loading...', // The text to use whilst the AJAX request is loading
				
                ajax: {
					url: $(this).attr('rel')
				},
                title: {
						text: $(this).text(),
						button: true
				}

			},
			position: {
				at: 'right center', // Position the tooltip above the link
				my: 'left center',
				viewport: $(window), // Keep the tooltip on-screen at all times
				effect: false // Disable positioning animation
			},
            show: {
				solo: true // Only show one tooltip at a time
			},
			hide: 'unfocus',
			style: {
				classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
			}
		})
}).click(function(event) { event.preventDefault(); });